import React from 'react'
import { ProgressStatus } from '@/types/work'

interface StatusSelectionDialogProps {
  isOpen: boolean
  onClose: () => void
  onSubmit: (status: ProgressStatus) => void
}

const StatusSelectionDialog: React.FC<StatusSelectionDialogProps> = ({
  isOpen,
  onClose,
  onSubmit
}) => {
  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={(e) => e.stopPropagation()}>
      <div className="bg-card text-card-foreground rounded-lg shadow-lg w-full max-w-md p-6">
        <h3 className="text-xl font-semibold text-foreground mb-4">选择检查项状态</h3>
        <p className="text-muted-foreground mb-6">请选择当前检查项的进度状态</p>
        
        <div className="space-y-3">
          <button 
            onClick={() => onSubmit(ProgressStatus.IN_PROGRESS)}
            className="w-full py-3 px-4 flex items-center justify-between bg-background hover:bg-accent rounded-md border border-input transition-colors"
          >
            <span className="font-medium">进行中</span>
            <span className="inline-block w-3 h-3 bg-secondary rounded-full"></span>
          </button>
          
          <button 
            onClick={() => onSubmit(ProgressStatus.REMEDIATION)}
            className="w-full py-3 px-4 flex items-center justify-between bg-background hover:bg-accent rounded-md border border-input transition-colors"
          >
            <span className="font-medium">整改中</span>
            <span className="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
          </button>
          
          <button 
            onClick={() => onSubmit(ProgressStatus.COMPLETED)}
            className="w-full py-3 px-4 flex items-center justify-between bg-background hover:bg-accent rounded-md border border-input transition-colors"
          >
            <span className="font-medium">已完成</span>
            <span className="inline-block w-3 h-3 bg-green-500 rounded-full"></span>
          </button>
        </div>
        
        <button
          onClick={onClose}
          className="w-full mt-6 px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors"
        >
          取消
        </button>
      </div>
    </div>
  )
}

export default StatusSelectionDialog
